<template>
  <div class="admin-page">
    <div class="page-header">
      <h1 class="page-title">我的项目概览</h1>
      <p class="page-subtitle">项目/团队负责人视角：我负责的团队与近期活动</p>
    </div>

    <el-card class="content-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="card-title">关键指标（近 {{ days }} 天）</span>
          <div class="header-actions">
            <el-select v-model="days" size="small" style="width: 120px" @change="load">
              <el-option :value="7" label="近7天" />
              <el-option :value="14" label="近14天" />
              <el-option :value="30" label="近30天" />
            </el-select>
          </div>
        </div>
      </template>

      <el-row :gutter="16">
        <el-col :xs="24" :sm="12" :md="8">
          <el-card shadow="hover" class="kpi-card"><div class="kpi-num">{{ stats.teamCount }}</div><div class="kpi-title">我负责的团队</div></el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-card shadow="hover" class="kpi-card"><div class="kpi-num">{{ stats.scheduleCount }}</div><div class="kpi-title">团队日程</div></el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-card shadow="hover" class="kpi-card"><div class="kpi-num">{{ stats.worklogCount }}</div><div class="kpi-title">工作日志（总计）</div></el-card>
        </el-col>
      </el-row>

      <div class="trend-wrap">
        <div class="trend-title">近期工作日志趋势</div>
        <div class="bars">
          <div v-for="(p,i) in trend" :key="i" class="bar">
            <div class="bar-col" :style="{ height: Math.max(6, (p.worklogs || 0) * scale) + 'px' }" />
            <div class="bar-label">{{ p.date }}</div>
          </div>
        </div>
      </div>

      <div class="teams-wrap">
        <div class="teams-title">我负责的团队（{{ teams.length }}）</div>
        <el-table :data="teams" size="small" v-loading="loading">
          <el-table-column prop="teamId" label="#" width="80" />
          <el-table-column prop="teamName" label="团队名称" />
          <el-table-column prop="description" label="描述" />
          <el-table-column prop="createTime" label="创建时间" width="180" />
        </el-table>
      </div>

      <el-divider />
      <div class="detail-sections">
        <el-row :gutter="16">
          <el-col :xs="24" :md="12">
            <el-card shadow="never" class="sub-card">
              <template #header><span class="sub-title">团队日程状态分布</span></template>
              <el-descriptions :column="2" size="small" border>
                <el-descriptions-item label="待办">{{ scheduleStatus.todo ?? 0 }}</el-descriptions-item>
                <el-descriptions-item label="进行中">{{ scheduleStatus.doing ?? 0 }}</el-descriptions-item>
                <el-descriptions-item label="已完成">{{ scheduleStatus.done ?? 0 }}</el-descriptions-item>
                <el-descriptions-item label="已取消">{{ scheduleStatus.canceled ?? 0 }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-card shadow="never" class="sub-card">
              <template #header><span class="sub-title">Top 团队（近{{ days }}天按日志数）</span></template>
              <el-table :data="topTeams" size="small">
                <el-table-column prop="teamId" label="#" width="80" />
                <el-table-column prop="teamName" label="团队" />
                <el-table-column prop="worklogs" label="日志数" width="100" />
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="16" style="margin-top: 16px">
          <el-col :xs="24" :md="12">
            <el-card shadow="never" class="sub-card">
              <template #header><span class="sub-title">Top 用户（近{{ days }}天按日志数）</span></template>
              <el-table :data="topUsers" size="small">
                <el-table-column prop="userId" label="#" width="80" />
                <el-table-column prop="username" label="用户" />
                <el-table-column prop="worklogs" label="日志数" width="100" />
              </el-table>
            </el-card>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-card shadow="never" class="sub-card">
              <template #header><span class="sub-title">最近工作日志（近{{ days }}天）</span></template>
              <el-table :data="recentWorklogs" size="small">
                <el-table-column prop="worklogId" label="#" width="80" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="logDate" label="日志日期" width="110" />
                <el-table-column label="创建时间" width="160">
                  <template #default="{ row }">{{ row.createTime || '-' }}</template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="16" style="margin-top: 16px">
          <el-col :xs="24" :md="12">
            <el-card shadow="never" class="sub-card">
              <template #header><span class="sub-title">即将开始的日程（未来{{ days }}天）</span></template>
              <el-table :data="upcomingSchedules" size="small">
                <el-table-column prop="scheduleId" label="#" width="80" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="status" label="状态" width="90" />
                <el-table-column prop="priority" label="优先级" width="90" />
                <el-table-column prop="startTime" label="开始时间" width="160" />
              </el-table>
            </el-card>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-card shadow="never" class="sub-card">
              <template #header><span class="sub-title">团队明细（近{{ days }}天日志）</span></template>
              <el-table :data="teamDetails" size="small">
                <el-table-column prop="teamId" label="#" width="80" />
                <el-table-column prop="teamName" label="团队" />
                <el-table-column prop="members" label="成员数" width="90" />
                <el-table-column prop="schedules" label="日程数" width="90" />
                <el-table-column prop="worklogs" label="日志数" width="90" />
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { api } from '@/utils/api'

const loading = ref(false)
const days = ref(7)
const stats = ref({ teamCount: 0, scheduleCount: 0, worklogCount: 0 })
const trend = ref([])
const teams = ref([])
const scheduleStatus = ref({})
const topTeams = ref([])
const topUsers = ref([])
const recentWorklogs = ref([])
const upcomingSchedules = ref([])
const teamDetails = ref([])

const maxVal = computed(()=> Math.max(1, ...trend.value.map(t=>Number(t.worklogs||0))))
const scale = computed(()=> 80 / maxVal.value)

async function load() {
  loading.value = true
  try {
    const data = await api.get('/metrics/leader', { days: days.value })
    stats.value = data?.stats || stats.value
    trend.value = Array.isArray(data?.trend) ? data.trend : []
    teams.value = Array.isArray(data?.teams) ? data.teams : []
  scheduleStatus.value = data?.scheduleStatus || {}
  topTeams.value = Array.isArray(data?.topTeamsByWorklogs) ? data.topTeamsByWorklogs : []
  topUsers.value = Array.isArray(data?.topUsersByWorklogs) ? data.topUsersByWorklogs : []
  recentWorklogs.value = Array.isArray(data?.recentWorklogs) ? data.recentWorklogs : []
  upcomingSchedules.value = Array.isArray(data?.upcomingSchedules) ? data.upcomingSchedules : []
  teamDetails.value = Array.isArray(data?.teamDetails) ? data.teamDetails : []
  } catch (e) {
    ElMessage.error('加载失败：' + (e.message||''))
  } finally {
    loading.value = false
  }
}

onMounted(load)
</script>

<style scoped>
.admin-page { padding: 24px; background: #f5f7fa; min-height: 100vh; }
.content-card { border-radius: 12px; }
.kpi-card { text-align:center }
.kpi-num { font-size:28px; font-weight:700; }
.kpi-title { color:#6b7280; margin-top:6px }
.trend-wrap { margin-top: 20px; }
.trend-title { font-weight: 600; margin-bottom: 8px; }
.bars { display:flex; gap:8px; align-items:flex-end; height: 110px; }
.bar { display:flex; flex-direction:column; align-items:center; gap:6px; }
.bar-col { width: 18px; background:#67c23a; border-radius:4px; transition:height .2s; }
.bar-label { font-size:12px; color:#6b7280 }
.teams-wrap { margin-top: 20px; }
.detail-sections { margin-top: 16px; }
.sub-card { margin-bottom: 12px; }
.sub-title { font-weight: 600; }
</style>